<template>
  <!-- <div class="container">
    <header></header>
    <main>
      <aside>
        <ul>
          <li v-for="navItem in menus" :key="navItem.id" class="navItem">
            {{ navItem.title }}
            <ul>
              <li
                v-for="subNavItem in navItem.children"
                :key="subNavItem.id"
                class="subNavItem"
              >
                <router-link :to="'/home/'+subNavItem.path">{{
                  subNavItem.title
                }}</router-link>
              </li>
            </ul>
          </li>
        </ul>
       
      </aside>
      <main>
        <keep-alive>
          <router-view v-if="$route.meta.isKeepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.isKeepAlive"></router-view>
      </main>
    </main>
  </div> -->
  <el-container class="container">
    <el-header>
      <h1>蜗牛学院</h1>
    </el-header>
    <el-container class="main-container">
      <el-aside :width="isCollapse?'68px':'220px'">
       <i v-if="!isCollapse" class="el-icon-s-fold" @click="toggleCollpase" style="margin-left:190px"></i>
       <i v-else class="el-icon-s-unfold" @click="toggleCollpase" style="margin-left:40px"></i>
        <el-menu
              background-color="rgb(0,12,23)"
              text-color="#fff"
              active-text-color="#ffd04b"
              :unique-opened="true"
              :collapse="isCollapse"
              :collapse-transition="false"
              :router="true">
              <el-submenu :index="item.id" v-for="item in menus" :key="item.id">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{item.title}}</span>
                </template>
                <el-menu-item :index="'/home/'+subitem.path" 
                              v-for="subitem in item.children" :key="subitem.id">
                    <template slot="title">
                      <i :class="subitem.icon"></i>
                      <span>{{subitem.title}}</span>
                    </template>
                </el-menu-item>
              </el-submenu>
        </el-menu>
      
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          id: "0",
          path: "",
          icon: "el-icon-user-solid",
          title: "用户管理",
          children: [
            {
              id: "01",
              path: "usersList",
              icon: "el-icon-tickets",
              title: "用户列表",
            },
          ],
        },
        {
          id: "1",
          path: "",
          icon: "el-icon-user",
          title: "学生管理",
          children: [
            {
              id: "11",
              path: "studentsList",
              icon: "el-icon-tickets",
              title: "学生列表",
            },
            {
              id: "12",
              path: "studentsAdd",
              icon: "el-icon-tickets",
              title: "新增学生",
            },
          ],
        },
        {
          id: "2",
          path: "",
          icon: "el-icon-school",
          title: "班级管理",
          children: [
            {
              id: "21",
              path: "classesList",
              icon: "el-icon-tickets",
              title: "班级列表",
            },
            {
              id: "22",
              path: "classesAdd",
              icon: "el-icon-tickets",
              title: "新增班级",
            },
          ],
        },
        {
          id: "3",
          path: "",
          icon: "el-icon-bank-card",
          title: "专业管理",
          children: [
            {
              id: "31",
              path: "subjectsList",
              icon: "el-icon-tickets",
              title: "专业列表",
            },
          ],
        },
        {
          id: "4",
          path: "",
          icon: "el-icon-bangzhu",
          title: "课程管理",
          children: [
            {
              id: "41",
              path: "coursesList",
              icon: "el-icon-tickets",
              title: "课程列表",
            },
            {
              id: "42",
              path: "coursesAdd",
              icon: "",
              title: "增加课程",
            },
          ],
        },
        {
          id: "5",
          path: "",
          icon: "el-icon-s-custom",
          title: "教师管理",
          children: [
            {
              id: "51",
              path: "teachersList",
              icon: "el-icon-tickets",
              title: "教师列表",
            },
            {
              id: "52",
              path: "teachersAdd",
              icon: "el-icon-tickets",
              title: "增加教师",
            },
          ],
        },
      ],
      authMenus: [],
      isCollapse:false
    };
  },
  methods: {
    async getAuthMenus() {
      const { data } = await this.$api.users.getAuthMenus();
      this.authMenus = data;
    },
    toggleCollpase(){
      this.isCollapse=!this.isCollapse;
    }
  },
  computed: {
    menus() {
      const menusData = this.navList.map((item, index) => {
        let childAuthAry = item.children.filter((child) => {
          return this.authMenus.includes(child.path);
        });
        if (childAuthAry.length > 0) {
          return { ...item, children: childAuthAry };
        }
      });
      return menusData.filter((item) => item);
    },
  },
  created() {
    this.getAuthMenus();
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .el-header {
    height: 70px;
    background-color: rgb(0, 12, 23);
    line-height: 70px;
    color: white;
  }
  .main-container {
    display: flex;
    .el-aside {
      background-color: rgb(0, 12, 23);
      color: white;
      min-height: 660px;
      .el-menu{
        border-right: none;
      }
    }
    .el-main{
      flex: 1;
    }
  }
}
</style>